<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 放置页签 -->
        <el-tabs>
          <!-- 左边内容：角色管理 -->
          <el-tab-pane label="角色管理">

            <el-row style="height:60px">
              <el-button type="primary" icon="el-icon-plus" size="small" @click="isDialogShow = true">新建角色</el-button>
            </el-row>

            <el-table border="" :data="list">
              <!-- 当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据 -->
              <!-- :data承接list数据后,prop直接就可以使用list中的id，name，description这些属性 -->
              <el-table-column
                type="index"
                align="center"
                label="序号"
                width="120px"
              />
              <el-table-column
                prop="name"
                align="center"
                label="名称"
                width="240px"
              />
              <el-table-column
                prop="description"
                align="center"
                label="描述"
              />
              <el-table-column
                prop="companyId"
                align="center"
                label="操作"
              >
                <template slot-scope="scope">
                  <!-- 通过slot-scope插槽的方式 可以拿到每一行的数据对象 详情见官方文档-->
                  <el-button type="success" @click="assignPerm(scope.row.id)">分配权限</el-button>
                  <el-button type="primary" @click="updateRoles(scope.row.id)">编辑</el-button>
                  <el-button type="danger" @click="deleteRoles(scope.row.id)">删除</el-button>
                </template>

              </el-table-column>
            </el-table>

            <el-row type="flex" justify="center" align="middle" style="height:60px">
              <!-- 分页标签组件 page-size每页显示条目个数，支持.sync 修饰符 current-page当前页数，支持.sync 修饰符-->
              <el-pagination
                layout="prev, pager, next"
                :total="Page.total"
                :current-page="Page.page"
                :page-size="Page.pagesize"
                @current-change="changePage"
              />
              <!-- @current-change监听分页事件，在点击切换分页时触发该事件 回调参数为当前页码-->
            </el-row>
          </el-tab-pane>

          <!-- 右边内容：公司信息 -->
          <el-tab-pane label="公司信息">
            <el-alert
              title="消息提示的文案"
              type="info"
              :closable="false"
              :show-icon="true"
            />
            <el-form label-width="120px" style="margin-top:50px">
              <el-form-item label="企业名称" style="width:400px">
                <el-input v-model="companyInfo.name" disabled />
              </el-form-item>
              <el-form-item label="企业地址" style="width:400px">
                <el-input v-model="companyInfo.companyAddress" disabled />
              </el-form-item>
              <el-form-item label="企业电话" style="width:400px">
                <el-input v-model="companyInfo.companyPhone" disabled />
              </el-form-item>
              <el-form-item label="企业邮箱" style="width:400px">
                <el-input v-model="companyInfo.mailbox" disabled />
              </el-form-item>
              <el-form-item label="企业备注" style="width:400px">
                <el-input v-model="companyInfo.remarks" disabled type="textarea" :rows="3" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>

    <!-- 编辑按钮 弹出层 -->
    <el-dialog :visible="isDialogShow" title="编辑信息" @close="btnNo">
      <el-form ref="forms" :model="formData" :rules="Rules">
        <el-form-item prop="name" label="角色名称" label-width="120px">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="角色描述" label-width="120px">
          <el-input v-model="formData.description" />
        </el-form-item>
      </el-form>
      <!-- 底部 俩按钮 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="8">
          <el-button size="small" @click="btnNo">取消</el-button>
          <el-button size="small" type="primary" @click="btnOk">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 分配权限按钮 弹出层 -->
    <el-dialog :visible="permissionDialog" title="分配权限" @close="permissionBtnNo">
      <el-tree
        ref="permissionTree"
        :data="treeNode"
        :props="defaultProp"
        :show-checkbox="true"
        :check-strictly="true"
        :default-checked-keys="selectCheck"
        :default-expand-all="true"
        node-key="id"
      />
      <el-row type="flex" justify="end">
        <el-col :span="8">
          <template v-solt="footer">
            <el-button size="small" @click="permissionBtnNo">取消</el-button>
            <el-button size="small" type="success" @click="permissionBtnOk">确定</el-button>
          </template>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList, getCompanyInfo, deleteRole, getRoleDetail, updateRole, addRole, assignPerm } from '@/api/setting.js'
import { getPermissionList } from '@/api/permisson'
import { tranListToTreeData } from '@/utils'
// import { mapGetters } from 'vuex' 使用getters快捷访问 得到需要的参数companyId 辅助函数形式需要用到计算属性
import user from '@/store/modules/user.js' // 使用原始形式得到参数companyId

export default {
  name: '',
  data() {
    return {
      list: [], // 员工角色列表
      Page: {
        page: 1, // 页码
        pagesize: 2, // 每页条数
        total: 20// 总条数
      },
      companyInfo: {}, // 公司信息
      isDialogShow: false, // 编辑的弹出层是否显示
      permissionDialog: false, // 控制分配权限的弹出层是否显示
      formData: { // 弹出层的表单数据
        name: '',
        description: ''
      },
      Rules: {
        name: [{ required: true, message: '名字必填', trigger: 'blur' }]
      },
      treeNode: [],
      defaultProp: { label: 'name' },
      selectCheck: [],
      roleId: '' // 当前角色的id
    }
  },
  // computed: {
  //   ...mapGetters(['companyId'])
  // },
  created() {
    this.getRoles() // 获取角色列表
    this.getsCompanyInfo() // 获取公司的信息
  },
  methods: {
    async getRoles() { // 获取所有角色列表
      const { total, rows } = await getRoleList(this.Page) // 接口只要两个参数，但this.Page有三个参数，形参大于实参不要紧
      this.Page.total = total
      this.list = rows
    },

    changePage(newPage) { // newPage为点击的页码数
      // console.log(1)
      this.Page.page = newPage // 将点击的页码赋值给“当前页码” 实现当前页码的更新
      this.getRoles() // 再次调用获取所有角色列表方法时候 因为传入参数“当前页码”发生了改变，
      // 所有这次调用的虽然是同一个接口方法，但传入的参数值不同了，所以后台返回的数据也不同了，所有实现了分页切换时展示不同角色的效果
    },

    async getsCompanyInfo() {
      // this.companyInfo = await getCompanyInfo(companyId)  快捷访问方式
      this.companyInfo = await getCompanyInfo(user.state.userInfo.companyId) // 原始形式得到companyId
    },

    async deleteRoles(rowId) { // 点击“删除” 触发该事件
      try {
        await this.$confirm('确认删除？') // this.$confirm需要用到catch来捕获”取消“ 点击“确定”，执行后续代码
        await deleteRole(rowId) // 删除角色信息
        this.getRoles() // 删除成功后 在调用获取角色信息的方法 重新渲染页面视图
      } catch (err) {
        console.log(err)
      }
    },

    async updateRoles(rowId) { // 点击“编辑” 触发
      this.formData = await getRoleDetail(rowId) // 拿到当前行角色的信息后，将数据回写到弹出层显示
      this.isDialogShow = true
    },

    async btnOk() { // 新增/编辑完信息后 按确定按钮
      try {
        await this.$refs.forms.validate() // 手动验证 如果不传参数，则返回promise对象
        if (this.formData.id) { // 根据有无id来判断是新增还是编辑
          // 执行编辑业务
          await updateRole(this.formData)
        } else {
          // 执行新增业务
          addRole(this.formData)
        }
      } catch (err) {
        console.log(err)
      }
      this.getRoles() // 重新获取角色列表信息
      this.$message.success('操作成功')
      this.isDialogShow = false
    },

    btnNo() { // 点击取消 清空表单 移除校验规则 关闭弹层
    // 点击确定会关闭，点取消也会关闭 dialog关闭 就会触发close事件
      this.formData = {
        name: '',
        description: ''
      }
      this.$refs.forms.resetFields()
      this.isDialogShow = false
    },

    async assignPerm(id) { // 点击“分配权限”按钮触发
    // 显示弹层 显示数据
      const arrlist = await getPermissionList() // 拿到所有权限点列表
      const treeNode = tranListToTreeData(arrlist, '0') // 由于要将数据展示在树形结构上 所以需要将数组数据转化为树形数据
      this.treeNode = treeNode
      this.roleId = id // 记录当前角色的id
      // 当前角色所拥有的权限点
      const { permIds } = await getRoleDetail(id) // 角色详情接口返回的数据中就有 当前角色权限点 的数据
      // console.log(permIds)
      this.selectCheck = permIds
      // this.$forceUpdate()
      // console.log(this.selectCheck)
      this.permissionDialog = true
    },

    async permissionBtnOk() { // 点击分配权限的“确定”按钮
      // const data = await assignPerm({ id: this.roleId, permIds: this.selectCheck }) // 给角色分配权限
      // 但是this.selectCheck 是当前角色的权限点id，相当于是死数据，不会因为你编辑时勾选了哪个权限而实时更新！
      // 所以接下来要用到可以实时获取你勾选了哪些权限点的方法
      const arrId = this.$refs.permissionTree.getCheckedKeys() // el-tree的内置方法getCheckedKeys()可以做到实时获取
      // console.log(arrId)
      await assignPerm({ id: this.roleId, permIds: arrId }) // 给角色分配权限的接口
      this.$message.success('分配权限成功')
      this.permissionDialog = false // 关闭弹层
    },
    permissionBtnNo() {
      this.selectCheck = []
      this.permissionDialog = false
    }
  }
}
</script>

<style>

</style>
